<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>后台主页</title>
		<link rel="stylesheet" type="text/css" href="/zhaojun/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="/zhaojun/css/admin.css"/>
	</head>
	<body>
		<div class="wrap-container welcome-container">
			<div class="row">
				<div class="welcome-left-container col-lg-9">
					<div class="data-show">
						<ul class="clearfix">
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-org f-l">
										<span class="iconfont">&#xe606;</span>
									</div>
									<div class="right-text-con">
										<p class="name">连接数</p>
										<p><span class="color-org" th:text="${count}"/>数据</p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-blue f-l">
										<span class="iconfont">&#xe602;</span>
									</div>
									<div class="right-text-con">
										<p class="name">文章数</p>
										<p><span class="color-blue">189</span>数据</p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-green f-l">
										<span class="iconfont">&#xe605;</span>
									</div>
									<div class="right-text-con">
										<p class="name">评论数</p>
										<p><span class="color-green">221</span>数据</p>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="chart-panel panel panel-default">
						<div class="panel-body" id="chart" style="height: 376px;">
						</div>
					</div>
					<!--服务器信息-->
					<div class="server-panel panel panel-default">
						<div class="panel-header">服务器信息</div>
						<div class="panel-body clearfix">
							<div class="col-md-2">
								<p class="title">服务器环境</p>
								<span class="info" th:text="${osName}"/>
							</div>
							<div class="col-md-2">
								<p class="title"> 服务器版本</p>
								<span class="info" th:text="${osVersion}"/>
							</div>
							<div class="col-md-2">
								<p class="title">Java版本</p>
								<span class="info" th:text="${javaVersion}"/>
							</div>
							<div class="col-md-2">
								<p class="title">服务器IP地址</p>
								<span class="info" th:text="${inetAddress}"/>
							</div>
							<div class="col-md-2">
								<p class="title">服务器域名</p>
								<span class="info" th:text="${loopbackAddress}"/>
							</div>
							<div class="col-md-2">
								<p class="title">容器版本</p>
								<span class="info" th:text="${serverInfo}"/>
							</div>
						</div>
					</div>
				</div>
				<div class="welcome-edge col-lg-3">
					<!--最新留言-->
					<div class="panel panel-default comment-panel">
						<div class="panel-header">最新留言</div>
						<div class="panel-body">
							<div class="commentbox">
								<ul class="commentList">
								  <li class="item cl"> <a href="#"><i class="avatar size-L radius"><img alt="" src="/zhaojun/images/dog.jpg"></i></a>
								    <div class="comment-main">
								      <header class="comment-header">
								        <div class="comment-meta"><a class="comment-author" href="#">慕枫</a> 评论于
								          <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20">2014-8-31 15:20</time>
								        </div>
								      </header>
								      <div class="comment-body">
								        <p><a href="#">@某人</a> 系统真不错！！！</p>
								      </div>
								    </div>
								  </li>
								  <li class="item cl"> <a href="#"><i class="avatar size-L radius"><img alt="" src="/zhaojun/images/dog.jpg"></i></a>
								    <div class="comment-main">
								      <header class="comment-header">
								        <div class="comment-meta"><a class="comment-author" href="#">慕枫</a> 评论于
								          <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20">2014-8-31 15:20</time>
								        </div>
								      </header>
								      <div class="comment-body">
								        <p><a href="#">@某人</a> 系统真不错！！！</p>
								      </div>
								    </div>
								  </li>
								   <li class="item cl"> <a href="#"><i class="avatar size-L radius"><img alt="" src="/zhaojun/images/dog.jpg"></i></a>
								    <div class="comment-main">
								      <header class="comment-header">
								        <div class="comment-meta"><a class="comment-author" href="#">慕枫</a> 评论于
								          <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20">2014-8-31 15:20</time>
								        </div>
								      </header>
								      <div class="comment-body">
								        <p><a href="#">@某人</a> 系统真不错！！！</p>
								      </div>
								    </div>
								  </li>
								  <li class="item cl"> <a href="#"><i class="avatar size-L radius"><img alt="" src="/zhaojun/images/dog.jpg"></i></a>
								    <div class="comment-main">
								      <header class="comment-header">
								        <div class="comment-meta"><a class="comment-author" href="#">慕枫</a> 评论于
								          <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20">2014-8-31 15:20</time>
								        </div>
								      </header>
								      <div class="comment-body">
								        <p><a href="#">@某人</a> 系统真不错！！！</p>
								      </div>
								    </div>
								  </li>
								</ul>
							</div>
							<div id="pagesbox" style="text-align: center;padding-top: 5px;">

							</div>
						</div>
					</div>
					<!--联系-->
					<!--<div class="panel panel-default contact-panel">-->
					<!--</div>-->
				</div>
			</div>
		</div>
		<script src="/zhaojun/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="/zhaojun/js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//在线用户数
            var count = [[${count}]];
			layui.use(['layer','jquery'], function(){
				var layer 	= layui.layer;
				var $=layui.jquery;

                //在线图
                var myChart = echarts.init(document.getElementById('chart'));
                var option = {
                    title: {
                        text: '实时在线用户数'
                    },
                    tooltip: {
                        trigger: 'none',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    xAxis: {
                        data: ["用户数"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [count],
                        barWidth : 30
                    }]
                };
                myChart.setOption(option);
                $(window).resize(function(){
                    myChart.resize();
                });
			});
		</script>
	</body>
</html>
